<template>
    <div class="bg_white" style="height: calc(100vh - 198px);">
        <a-row>
            <a-col :span="24" style="width: 100%;margin-bottom: 10px;" label="班级名称">
                <a-form-model layout="inline" :model="formInline">
                    <a-form-model-item label="教师名称：">
                        <a-input allow-clear v-model="formInline.user" style="width: 250px" placeholder="请输入班级名称" />
                    </a-form-model-item>
                    <a-form-model-item label="学校名称">
                        <a-select default-value="全部" style="width: 200px;"></a-select>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button type="primary" html-type="submit" @click="handleSubmit">搜索</a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-col>
        </a-row>

        <div style="background: #fff;border-radius: 6px;">
            <a-table :pagination="false" :columns="columns" :data-source="data" bordered
                :rowKey="(record, index) => { return index }">
                <span slot="status" slot-scope="text, record">
                    {{ record.status == 1 ? "启用" : "禁用" }}
                </span>
                <span slot="action" slot-scope="text, record">
                    <a @click="actionUser(record.id)">绑定用户</a>
                    <a-divider type="vertical" />
                    <a @click="actionMenu(record.id)">绑定菜单</a>
                </span>
            </a-table>
            <a-pagination style="margin: 10px 0;" v-model="current" :page-size-options="pageSizeOptions" :total="total"
                show-size-changer :page-size="pageSize" @showSizeChange="onShowSizeChange">
                <template slot="buildOptionText" slot-scope="props">
                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                    <span v-if="props.value === '50'">全部</span>
                </template>
            </a-pagination>
        </div>

    </div>
</template>
  
<script>

import contacts from "@/api/organizations";
const columns = [
    {
        title: '编号',
        dataIndex: 'roleName',
    },
    {
        title: '学校名',
        dataIndex: 'description',
    },
    {
        title: '教师名',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '班级名',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '开课时间',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '结束时间',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
    },

];

const x = 3;
const y = 2;
const z = 1;
const gData = [];

const generateData = (_level, _preKey, _tns) => {
    const preKey = _preKey || '0';
    const tns = _tns || gData;

    const children = [];
    for (let i = 0; i < x; i++) {
        const key = `${preKey}-${i}`;
        tns.push({ title: key, key, scopedSlots: { title: 'title' } });
        if (i < y) {
            children.push(key);
        }
    }
    if (_level < 0) {
        return tns;
    }
    const level = _level - 1;
    children.forEach((key, index) => {
        tns[index].children = [];
        return generateData(level, key, tns[index].children);
    });
};
generateData(z);

const dataList = [];
const generateList = data => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        dataList.push({ key, title: key });
        if (node.children) {
            generateList(node.children);
        }
    }
};
generateList(gData);

const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some(item => item.key === key)) {
                parentKey = node.key;
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children);
            }
        }
    }
    return parentKey;
};
export default {
    data() {
        return {
            total: 0,
            current: 1,
            pageSizeOptions: ["10", "20", "30", "40", "50"],
            pageSize: 10,
            formInline: {},
            expandedKeys: [],
            searchValue: '',
            autoExpandParent: true,
            gData,
            data: [],
            columns,
            selectedRowKeys: [],
        }
    },
    computed: {
        rowSelection() {
            const { selectedRowKeys } = this;
            return {
                selectedRowKeys,
                onChange: this.onSelectChange,
                hideDefaultSelections: true,
                onSelection: this.onSelection,
            };
        },
    },
    mounted() {
        this.getRole()
    },
    methods: {
        handleSubmit() { },
        actionUser(id) {
            this.$message.success(id)
        },
        actionMenu(id) {
            this.$message.success(id)
        },
        getRole() {
            // contacts.getRole().then(res => {
            //     this.data = res.data
            // }, err => { })
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onChange(e) {
            const value = e.target.value;
            const expandedKeys = dataList
                .map(item => {
                    if (item.title.indexOf(value) > -1) {
                        return getParentKey(item.key, gData);
                    }
                    return null;
                })
                .filter((item, i, self) => item && self.indexOf(item) === i);
            Object.assign(this, {
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            });
        },
    }
}
</script>
  
<style lang="less" scoped>
.ant-layout-header {
    background: #03212100 !important;
}

.vtl {
    .vtl-drag-disabled {
        background-color: #d0cfcf;

        &:hover {
            background-color: #d0cfcf;
        }
    }

    .vtl-disabled {
        background-color: #d0cfcf;
    }
}
</style>
  